<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>

    <div>
      <!-- 卡片视图区域 -->
      <el-card class="box-card">
        <!-- 搜索与添加区域 -->
        <!-- Layout布局 - > 混合布局
           :gutter="20" 两个格子之间的间隔
        -->
        <el-row :gutter="20" style="display: flex;align-items: center; margin-bottom: 20px;">
          <el-col :span="4.5">
            <!-- <div class=""> -->
            <QueryOptions title="状态" style="min-width: 6.25rem">
              <template>
                <el-select @change="statusSearch" v-model="input0" placeholder="请选择" size="small">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </QueryOptions>
            <!-- </div>   -->
          </el-col>
          <el-col :span="5" class="search">
            <QueryOptions title="职位">
              <el-input size="small" placeholder="请输入内容" v-model="queryBody.title">
              </el-input>
            </QueryOptions>
          </el-col>
          <el-col :span="6" class="search">
            <!-- Input输入框 - > 可清空输入框 -->
            <QueryOptions title="名称">
              <el-input placeholder="请输入内容" v-model="queryBody.name" size="small" clearable>
              </el-input>
            </QueryOptions>
          </el-col>
          <el-col :span="1">
            <el-button size="small" style="color:#fff;background-color: #007d71;" icon="el-icon-search"
              @click="searchInfo"></el-button>
          </el-col>
          <el-col :span="6" class="top-button">
            <el-button type="primary" size="small" style="background-color: #009688;" icon="el-icon-circle-plus-outline"
              @click="dialogFormVisible = true">添加</el-button>
            <el-dialog :destroy-on-close="true" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="职位" :label-width="formLabelWidth">
                  <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <el-form :model="form">
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                  <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form.remark">
                  </el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">关闭</el-button>
                <el-button type="primary" @click="addRole">保存</el-button>
              </div>
            </el-dialog>
            <!-- // -->
            <!-- <el-button type="primary" size="small" style="background-color: #009688;margin: 0 10px;"
              icon="el-icon-s-platform" @click="dialogVisible = true">授权</el-button> -->
            <el-popover placement="top" width="150px" trigger="click" style="margin-left: 10px;">
              <div class="dialog-info">
                <el-button size="small" @click="startRole">启用</el-button>
                <el-button size="small" @click="freezRole" style="margin-left: 0;">冻结</el-button>
                <el-button size="small" @click="deleteRole" style="margin-left: 0;">删除</el-button>
              </div>
              <el-button slot="reference" size="small" style="background-color: #009688; color: aliceblue;"
                icon="el-icon-caret-bottom">操作</el-button>
            </el-popover>
          </el-col>
        </el-row>

        <!-- 系统用户列表区域
      角色编号 角色名称    创建时间 更新时间  查看  操作
       -->
        <el-table :data="roleList" border @selection-change="selectRows" style="width: 100%">
          <!-- <el-table-column type="index" :align="align"></el-table-column> -->
          <el-table-column prop="index" type="selection" width="55"></el-table-column>
          <el-table-column prop="title" label="职位" width="180" :align="align"></el-table-column>
          <el-table-column prop="name" label="角色名称" width="180" :align="align"></el-table-column>
          <el-table-column prop="createDate" label="创建时间" :align="align"> </el-table-column>
          <el-table-column prop="createDate" label="更新时间" :align="align"> </el-table-column>
          <el-table-column prop="show" label="查看" :align="align">
            <el-button slot-scope="scope" size="mini" @click="handleShow(scope.$index, scope.row)" type="success"
              plain>查看</el-button>

            <el-dialog :visible.sync="dialogShowVisible" :append-to-body="true" width="800px">
              <el-descriptions border v-model="rowInfo" title="角色信息">
                <el-descriptions-item label="名字">{{ rowInfo.name }}</el-descriptions-item>
                <el-descriptions-item label="职位">{{ rowInfo.title }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ rowInfo.createDate }}</el-descriptions-item>
                <el-descriptions-item label="状态">{{ rowInfo.status }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{ rowInfo.remark }}</el-descriptions-item>

              </el-descriptions>
            </el-dialog>
          </el-table-column>
          <el-table-column prop="op" label="操作">
            <template slot-scope="scope">
              <el-button size="mini"
                style="color: #fff;background-color:rgba(0, 125, 113,.5);border:1px solid #007d71;margin-left: 0;"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-dialog :visible.sync="dialogEditFormVisible">
                <el-form :model="editForm">
                  <el-form-item label="角色标识" :label-width="formLabelWidth">
                    <el-input v-model="editForm.title" autocomplete="off"></el-input>
                  </el-form-item>
                </el-form>
                <el-form :model="editForm">
                  <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="editForm.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="editForm.remark">
                    </el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogEditFormVisible = false">关闭</el-button>
                  <el-button type="primary" @click="editRole">保存</el-button>
                </div>
              </el-dialog>
              <el-button size="mini" type="danger" style="margin-left: 20px;"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" current-page="1"
          :page-sizes="[5, 10, 15, 20]" :page-size="queryBody.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="roleTotal">
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import { onMounted } from 'vue';
import QueryOptions from '@/components/QueryOptions.vue';
export default {
  data() {
    return {
      input0: '',
      rowInfo: {},
      roleTotal: 0,
      // 对话框
      dialogVisible: false,
      // 对其方式
      align: "center",
      formLabelWidth: '120px',
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogEditFormVisible: false,
      dialogShowVisible: false,
      form: {
        title: '',
        name: '',
        remark: '',
      },
      textarea: '',
      options: [
        {
          value: 'p1',
          label: '正常'
        },
        {
          value: 'p2',
          label: '冻结'
        }
      ],
      value: '',
      roleList: [],
      findData: {
        createDate: "2023-07-03T07:26:33.151Z",
        updateDate: "2023-07-03T12:14:16.990Z",
        name: '',
        title: '',
        statusvalues: ''
      },
      opList: [],
      editForm: {},
      queryBody: {
        page: 1,
        pageSize: 5,
        status: null,
        nickname: null,
        username: null,
        dept: null
      },
      selection: []
    }
  },
  methods: {
    //状态
    statusSearch() {
      this.input0 == 'p1' ? this.queryBody.status = 1 : this.queryBody.status = 2;
      this.searchInfo();
    },

    //根据输入信息查找
    searchInfo() {
      this.getAllRoleList();
    },
    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.queryBody.pageSize = pageSize;
      this.searchInfo();
    },
    handleCurrentChange(currentPage) {
      this.queryBody.page = currentPage;
      this.searchInfo();
    },
    //复选框选中/取消勾选事件
    selectRows(selection) {
      this.opList = selection
      console.log(this.opList)

    },
    //启用
    async startRole() {
      let ids = new Array();
      this.opList.forEach(item => {
        ids.push(item.id);
      });
      if (ids == 0) {
        return this.$message.error("选项不能为空")
      }
      const { data: result } = await this.$http.get("/role/mulActive/" + ids);
      if (result.success) {
        this.$message.success("操作成功！");
        //this.$refs.multipleTable.clearSelection();
      } else {
        this.$message.error(result.errorMsg);
      }
    },
    //冻结
    async freezRole() {
      let ids = new Array();
      this.opList.forEach(item => {
        ids.push(item.id);
      })
      if (ids == 0) {
        return this.$message.error("选项不能为空")
      }
      const { data: result } = await this.$http.get("/role/mulFreeze/" + ids);
      if (result.success) {
        this.$message.success("操作成功");
      } else {
        this.$message.error(result.errorMsg)
      }
    },
    //添加
    async addRole() {
      console.log(this.form)
      this.dialogFormVisible = true
      const { data: result } = await this.$http.post("/role", this.form);
      if (result.success) {
        this.$message.success(result.data)
      } else {
        this.$message.error(result.errorMsg)
      }
      this.dialogFormVisible = false
    },

    //编辑
    handleEdit(index, row) {
      this.dialogEditFormVisible = true
      this.editForm = row
      console.log(index, row);
    },
    async editRole() {
      console.log(this.editForm)
      const { data: result } = await this.$http.put("/role", this.editForm)
      if (result.success) {
        this.$message.success(result.data)
      } else {
        this.$message.error(result.errorMsg)
      }
    },
    //删除
    async handleDelete(index, row) {
      console.log(row.status);
      if (row.status == 3) {
        this.$message.error("该角色已删除，请忽重复操作")
      } else {
        const { data: result } = await this.$http.delete("/role", { params: { id: row.id } });
        if (result.success) {
          this.$message.success(result.data);
          this.searchInfo()
        } else {
          this.$message.error(result.errorMsg)
        }
      }


    },
    async deleteRole() {
      let ids = new Array();

      this.opList.forEach(item => {
        ids.push(item.id);
      })
      if (ids == 0) {
        return this.$message.error("选项不能为空")
      }
      const { data: result } = await this.$http.get("/role/mulDelete/" + ids);
      if (result.success) {
        this.$message.success("操作成功");
      } else {
        this.$message.error(result.errorMsg)
      }
    },
    //查看
    handleShow(index, row) {
      this.dialogShowVisible = true

      this.rowInfo = row
      console.log(index, row)
    },
    async getAllRoleList() {
      const { data: result } = await this.$http.get("/role", { params: this.queryBody });
      if (result.success) {
        this.roleList = result.data.records;
        console.log(this.roleList)
        this.roleTotal = result.data.total;

      }
    },


  },
  mounted() {
    this.getAllRoleList();
  },
  components: {
    QueryOptions
  }
}
</script>

<style>
.status {
  height: 35px;
  text-align: center;
  width: 130px;
  line-height: 35px;
  border: 1px solid green;
}

.search {
  display: flex;
  flex-direction: row;
  width: 30px;
  text-align: center;
}

.dialog-info {
  display: flex;
  flex-direction: column;
  text-align: center;

}

/* .el-select .el-input {
    width: 100px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  } */
</style>